<template>
  <scroll-seamless :list="list">
    <div class="content-item" v-for="(item, index) in list" :key="index">
      <span class="order-num-12">{{ index + 1 }}</span>
      <div class="item-inner">
        <el-row>
          <el-col :span="12">
            <span class="labels-12">设备：</span>
            <span class="info-15"> {{ item.deviceName }}</span>
          </el-col>
          <el-col :span="12">
            <span class="labels-12">时间：</span>
            <span class="info-15"> {{ item.createTime }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="labels-12"> 事件：</span>
            <span class="info-15"> {{ item.title }}</span>
          </el-col>
          <el-col :span="12">
            <span class="labels-12">告警值：</span>
            <span class="warning-15"> {{ item.alarmValue || '0.0' }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
  </scroll-seamless>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";

const list = ref<Alarm[]>([])
let timer:number

onMounted(()=>{
  getData()
  nextTick(()=>{
    swiper()
  })
})

onBeforeUnmount(()=>{
  clearData()
})

function getData() {
  GET("policeData",{}).then((res) => {
    if (res.code === 200) {
      list.value = res.data
    }
  })
}

function clearData() {
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}

function swiper() {
  if (timer) {
    return
  }
  let looper = () => {
    getData()
  }
  timer = setInterval(looper, useSettingStore().listAutoTime);
}
</script>

<style scoped lang="scss">
</style>